// 等待全部的dom资源加载完毕之后实现该操作
window.onload = function () {
    // 全局变量记录一个所缩略图的下标
    var bigIndexImg = 0;
    navPathDateBind();
    // 路径导航效果
    function navPathDateBind() {
        /**
    * 思路：
    * 1.先获取路径导航的页面元素（navPath）
    * 2.获取所需数据（data/js--->gooDate.js）
    * 3.数据动态产生，因此dom元素也时的动态产生。相当于需要数据的数量来创建dom元素
    * 4.遍历数据创建dom元素的最后一条，只创建a标签，不创建i标签；
    */

        // 获取导航路径的页面元素
        var navPath = document.querySelector('#wrapper #content .contentMain .navPath');
        // console.log(navPath);
        // 获取数据
        var path = goodData.path;
        // console.log(path);
        // 遍历数据
        //  for (var i = 0; i < path.length; i++) {
        for (var i = 0; i < path.length; i++) {
            // console.log(navPath);
            //  alert("检查");

            if (i == path.length - 1) {
                var aNode = document.createElement("a")
                aNode.innerText = path[i].title;
                navPath.appendChild(aNode);

            } else {
                // 创建a标签
                var aNode = document.createElement("a")
                aNode.href = path[i].url;
                aNode.innerText = path[i].title;

                //创建i标签
                var iNode = document.createElement('i');
                iNode.innerText = '/';


                // 让navPath追加a标签和i标签
                navPath.appendChild(aNode);
                navPath.appendChild(iNode);
                // console.log(navPath);


            }

        }
    }

    //   放大镜的移入移出效果
    bigClassBind();
    function bigClassBind() {
        /**
         * 思路：
         * 1.获取小图框的元素对象，并设置移入移出事件（ onmouseenter）
         * 2.动态地创建蒙版元素以及大图片元素
         * 3.移除（onmouseleave）时。需要移除蒙版元素和大图框
         */
        // 获取小图框
        var samllPic = document.querySelector('#wrapper #content .contentMain .center .left .leftTop .smallPic')
        // console.log(samllPic);
        // 获取leftTop元素
        var leftTop = document.querySelector('#wrapper #content .contentMain .center .left .leftTop');
        // console.log(leftTop);

        // 获取数据
        var imgsrc = goodData.imgsrc;
        // 设置移入对象
        samllPic.onmouseenter = function () {
            // 创建蒙版元素
            var maskDiv = document.createElement('div');
            maskDiv.className = "mask";
            // 创建大图框元素
            var bigPic = document.createElement('div');
            bigPic.className = 'bigPic';

            //创建大图元素
            var bigImg = document.createElement('img');
            bigImg.src = imgsrc[bigIndexImg].b;


            // 大图框追加大图片
            bigPic.appendChild(bigImg);

            // 小图框追加蒙版
            samllPic.appendChild(maskDiv);

            //leftTOP追加大图框

            leftTop.appendChild(bigPic);

            //  放大镜鼠标移动实现蒙版地拖拽效果
            //设置移动事件   
            samllPic.onmousemove = function (event) {
                //enent.cLientX:鼠标点距离浏览器左侧X轴的值
                //getBoundingClientRect().Left:小图框元素距离浏览器左侧可视Left值
                //offsetwidth:为元素的占位宽度

                var left = event.clientX - samllPic.getBoundingClientRect().left - maskDiv.offsetWidth / 2;
                var top = event.clientY - samllPic.getBoundingClientRect().top - maskDiv.offsetHeight / 2;
                //    判断蒙版是否在指定范围之内
                if (left < 0) {
                    left = 0
                } else if (left > samllPic.clientWidth - maskDiv.offsetWidth) {
                    left = samllPic.clientWidth - maskDiv.offsetWidth;
                }


                if (top < 0) {
                    top = 0;
                } else if (top > samllPic.clientHeight - maskDiv.offsetHeight) {
                    top = samllPic.clientHeight - maskDiv.offsetHeight;
                }

                // 设置蒙版的left和top
                maskDiv.style.left = left + "px";
                maskDiv.style.top = top + "px";
                //移动的比例关系=蒙版元素移动的距离/大图片元素移动的距离
                //蒙版元素移动的距离=小图框宽度-蒙版元素的宽度
                //大图片元素移动的距离=大图片宽度-大图框元素的宽度

                var scale = (samllPic.clientWidth - maskDiv.offsetWidth) / (bigImg.offsetWidth - bigPic.clientWidth);
                //   console.log(scale);0.495
                bigImg.style.left = -left / scale + "px";
                bigImg.style.top = -top / scale + "px";
            }

            // 设置移出事件
            samllPic.onmouseleave = function () {
                // 移除蒙版元素
                samllPic.removeChild(maskDiv);

                // leftTop移除大图框
                leftTop.removeChild(bigPic);
            }

        }

    }

    // 动态渲染放大镜的缩略图的数据

    thumbailDate();
    function thumbailDate() {

        /**
         * 思路：
         * 1.先获取PicList元素下的ul
         * 2.获取gooDate中的imgsSrc中的数据
         * 3.遍历数组，根据数组长度创建li元素
         * 4.li 添加元素img ul添加元素li
         */

        //获取picList 的元素

        var ul = document.querySelector('#wrapper #content .contentMain .center .left .leftBootom .picList ul');
        // console.log(ul);
        // 获取goodDae中的数据
        var imgSrc = goodData.imgsrc;
        // console.log(imgSrc);
        for (var i = 0; i < imgSrc.length; i++) {

            // alert("检查")
            // 创建li元素
            var newli = document.createElement('li');
            // 创建img元素
            var newimg = document.createElement('img');
            //给img添加数据
            newimg.src = imgSrc[i].s;

            // 将img元素添加为li的子节点
            newli.appendChild(newimg);

            // ul追加li元素
            ul.appendChild(newli);
        }
    }

    //  点击缩略图的功能
    thumbailClick();
    function thumbailClick() {
        /**
         *思路：
         *1.获取所有的li元素，循环发生点击事件
         *2.点击缩略图需要确定其下标位置找到对应的小图路径和大图路径替换现有的src
         *
         */

        //  获取所有的莉元素
        var liNode = document.querySelectorAll('#wrapper #content .contentMain .center .left .leftBootom .picList ul li')
        // console.log(liNode);
        // 循环点击li元素
        // 获取smallPic元素

        var samllPic_img = document.querySelector('#wrapper #content .contentMain .center .left .leftTop .smallPic img');
        // 获取数据
        var imgssrc = goodData.imgsrc;

        samllPic_img.src = imgssrc[0].s;
        for (var i = 0; i < liNode.length; i++) {
            // 点击事件之前添加自定义下标
            liNode[i].index = i;
            liNode[i].onclick = function () {
                var idex = this.index;
                // console.log(idex);
                bigIndexImg = idex;

                // 变化小图的路径
                samllPic_img.src = imgssrc[bigIndexImg].s;
            }
        }
    }

    // 缩略图左右轮播效果
    thumbailLeftRight();
    function thumbailLeftRight() {
        /**
         * 思路：
         * 1.先获取左右两边的箭头
         * 2.在获取可视的div ul li元素
         * 3.计算
         * 3.发生点击事件
         */
        // 获取箭头元素
        var prev = document.querySelector('#wrapper #content .contentMain .center .left .leftBootom  a.prev');
        var next = document.querySelector('#wrapper #content .contentMain .center .left .leftBootom  a.next');
        // console.log(prev);
        // 获取可视的div ul li元素
        var ul = document.querySelector('#wrapper #content .contentMain .center .left .leftBootom .picList ul');
        var li = document.querySelectorAll('#wrapper #content .contentMain .center .left .leftBootom .picList ul li');
        // console.log(picList,ul,li);
        // 起点
        var start = 0;
        // 步长
        var step = (li[0].offsetWidth + 20) * 2;
        // 总体运动距离等于ul的宽度-div框picList的宽度=（图片总数-div中显示的图数）*（li的宽度+20）
        var endPosition = (li.length - 5) * (li[0].offsetWidth + 20);

        //发生事件
        next.onclick = function () {
            start += step;
            if (start > endPosition) {
                start = endPosition;
            }
            ul.style.left = -start + "px";
        }

        prev.onclick = function () {
            start -= step;
            if (start < 0) {
                start = 0;
            }
            ul.style.left = start + "px";
        }
    }

    //   商品详情的数据渲染
    rightTopDate();
    function rightTopDate() {
        /**
         * 思路：
         * 1.查找rightTop元素
         * 2.查找数据
         * 3.建立一个字符串变量将原来的布局结构贴进去，将对应的数据放到对应的位置，重新渲染top元素
         */
        var rightTop = document.querySelector('#wrapper #content .contentMain .center .right .rightTop ');
        // console.log(rightTop);

        // 查找数据
        var goodDetail = goodData.goodsDetail;
        // console.log(goodDetail);

        // 创建字符串变量

        //模板字符串替换数据
        var s = `<h3>${goodDetail.title}</h3>
    <p>${goodDetail.recommend}</p>
    <div class="priceWrap">
         <div class="priceTop">
            <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
            <div class="price">
                <span>￥</span>
                <p>${goodDetail.price}</p>
                <i>降价通知</i>
            </div>
            <p>
                <span>累计评价</span>
                <span>${goodDetail.evaluateNum}</span>
            </p>
         </div>
         <div class="priceBottom">
             <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
             <p>
                <span>${goodDetail.promoteSales.type}</span>
                <span>${goodDetail.promoteSales.content}</span>
             </p>
         </div>
    </div>
    <div class="support">
        <span>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span>
        <p>${goodDetail.support}</p>
    </div>
    <div class="address">
        <span>配&nbsp;送&nbsp;至</span>
        <p>${goodDetail.address}</p>
    </div>`;
        // 重新渲染rightTop
        rightTop.innerHTML = s;
    }

    // 商品参数选择渲染
    rightBottomDate();
    function rightBottomDate() {
        /***
         * 思路：
         * 1.找rightBottom的元素对象
         * 2.查找对应的数据
         * 3.遍历数据动态创建dl>dt,dd
         */

        // 查找元素对象
        var chooseWrap = document.querySelector('#wrapper #content .contentMain .center .right .rightBottom .chooseWrap');
        // 查找数据
        var crumbData = goodData.goodsDetail.crumbData;
        // console.log(chooseWrap);
        // console.log(crumbData);
        // 循环遍历对象
        for (var i = 0; i < crumbData.length; i++) {
            // 创建dl元素对象
            var dl = document.createElement('dl');
            // 创建dt元素对象
            var dt = document.createElement('dt');
            dt.innerText = crumbData[i].title;
            // dl后面追加dt元素
            dl.appendChild(dt);
            // 遍历data创建dd元素对象
            for (var j = 0; j < crumbData[i].data.length; j++) {
                var dd = document.createElement('dd');
                dd.innerText = crumbData[i].data[j].type;
                dd.setAttribute('price',crumbData[i].data[j].changePrice);

                // 追加dd
                dl.appendChild(dd);
            }
            // 将dl追加进去
            chooseWrap.appendChild(dl);


        }
    }

    // 点击选择参数的功能
    chooseData();
    function chooseData() {
        // 点击选择参数的功能
        /**
         * 点击选择参数
         * 思路：
         * 1.获取所有的dl元素，选择其中一个dl元素下的所有dd做实验
         * 2.循环所有的dd并添加点击事件
         * 3.确定实际发生事件的目标对象，然后给其他对象设置会原始属性
         * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
         * 点击dd之后展示在上方地选择结果
         * 思路
         * 1.先创建一个可以容纳dd地值的容器---数组，确定数组的初始长度添加默认值；
         * 2.然后将点击的dd元素按照对应的小标写入到数组身上
         **/

        // 第一个dl下的dd元素
        var dl = document.querySelectorAll('#wrapper #content .contentMain .center .right .rightBottom .chooseWrap dl');
        var arr=new Array(dl.length);
        var choose=document.querySelector('#wrapper #content .contentMain .center .right .rightBottom .choose');
        arr.fill(0);
        // console.log(arr);
        // console.log(dl);
        for (var i = 0; i < dl.length; i++) {
            (function (i) {
                var dd = dl[i].querySelectorAll('dd');
                // console.log(dd);
                // 遍历当前所有的dd
                for (var j = 0; j < dd.length; j++) {
                    dd[j].onclick = function () {
                        // console.log(this);
                        //清空choose
                        choose.innerText='';
                        for (var k = 0; k < dd.length; k++) {
                            dd[k].style.color = '#666';
                        }
                        this.style.color = "red";
                        // 点击哪一个就生成一个mark
                        arr[i]=this;
                        // 遍历arr数组，将dd的值写入数组
                        // var temp=0;  
                        changePriceBind(arr);
                        arr.forEach(function(value,index){                            if(value){
                                // 创建div元素并添加类名                               
                                var mark=document.createElement('div');
                                mark.className='mark';
                                mark.innerText=value.innerText;
                                // /创建a元素并追加给mark
                                var a=document.createElement('a');
                                a.innerText='X';
                                //设置下标'index',index
                                a.setAttribute('index',index);
                                mark.appendChild(a);
                                choose.appendChild(mark);
                            }
                        })
                        // 获取所有的a 标签，并循环产生点击事件
                        var aNodes=document.querySelectorAll('#wrapper #content .contentMain .center .right .rightBottom .choose .mark a');
                        // console.log(aNodes);
                        for(var n=0;n<aNodes.length;n++){
                            // console.log(aNodes[n]);
                            aNodes[n].onclick=function(){
                                var indx=this.getAttribute('index');
                                // console.log(indx);
                                arr[indx]=0;
                                // console.log(arr);
                                // 找到对应参数的所在的dl中的所有dd元素、
                                var ddList=dl[indx].querySelectorAll('dd');
                                // console.log(ddList);
                                // 遍历所有的dd元素
                                for(var m=0;m<ddList.length;m++)
                                {
                                    ddList[m].style.color='#666';
                                }
                                ddList[0].style.color='red';
                                choose.removeChild(this.parentNode);

                                // 调用价格函数
                                changePriceBind(arr);
                            }

                        }
                    }
                }
            })(i)
        }





    }
    //价格变动的函数声明
    /**
     * 这个函数是需要在点击dd的时候以及删除mark标记的时候才需要调用
     */
     function changePriceBind(arr){
        /**
         * 思路：
         * 1、获取价格的标签元素
         * 2、给每一个dd标签身上默认都设置一个自定义的属性，用来记录变化的价格
         * 3、遍历arr数组，将dd元素身上的新变化的价格和已有的价格（5299）相加
         * 4、最后将计算之后的结果重新渲染到p标签中
         */

      //1、原价格标签元素
      var oldPrice = document.querySelector('#wrapper #content .contentMain .center .right .rightTop .priceWrap .priceTop .price p');

      //取出默认的价格
      var price = goodData.goodsDetail.price;

      //2、遍历arr数组
      for(var i = 0 ; i < arr.length;i++){
           if(arr[i]){
              //数据类型的强制转换
              var changeprice = Number(arr[i].getAttribute('price'));
              //最终价格
              price += changeprice;
           }
           
      }

      oldPrice.innerText = price;
      var leftPrice=document.querySelector('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .left p');
      leftPrice.innerText='￥'+price;

    //   遍历选择搭配之中的复选款是否有选中de
    var ipts=document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .middle li input');
    var newPrice=document.querySelector('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .right i');
      
    for(var j=0;j<ipts.length;j++)

      {
        if(ipts[j].checked)
        price=Number(ipts[j].value);
      }
      newPrice.innerText='￥'+price;



  }
//   选择中间搭配区域的复选框价格变动；
    choosePriceBind();
    function choosePriceBind(){
        /**
         * 思路：
         * 1.获取所有的复选框
         * 2.遍历这些元素取出他们的价格，和左侧的商品价格进行累加，修改右侧 的价格
         */
        var ipts=document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .middle li input');
        var leftPrice=document.querySelector('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .left p');
        var newPrice=document.querySelector('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .right i');

        //遍历复选框
        
        for(var i=0;i<ipts.length;i++)
        {
            ipts[i].onclick=function(){
                var oldPrice=Number(leftPrice.innerText.slice(1));
              
                for(var j=0;j<ipts.length;j++)
                {
                    if(ipts[j].checked)
                    {
                        // 新价格=旧的价格+复选框价格
                        oldPrice=oldPrice+Number(ipts[j].value);
                       
                    }
                }
                // 写回右侧的套餐价格
                newPrice.innerText='￥'+oldPrice;
                
            }
        }
    
    
    }   

    // 封装一个公共选项卡
    /**
     * 被点击的元素
     * 被切换显示的元素
     */
    function Tab(tabBtns,tabContents){
        for(var i=0;i<tabBtns.length;i++)
        {
            tabBtns[i].index=i;
            tabBtns[i].onclick=function(){
                for (var j = 0; j < tabBtns.length; j++) {
                    tabBtns[j].className='';
                    tabContents[j].className='';
                    
                }
            this.className='active';
            tabContents[this.index].className='active';
            }
        }
    }

    // 点击左侧选项卡
    leftTab();
    function leftTab(){
        // 被点击的元素
        var h4s=document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .leftAside .asideTop h4');
        // console.log(h4s);
        // 被切换显示的元素
        var divs=document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .leftAside .asideBottom >div');
        console.log(divs);
        Tab(h4s,divs);


    }

    // 右侧选项卡
    rightTab();
    function rightTab(){
        var lis=document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .bottomDetail .tabBtns li');
        var divs=document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .bottomDetail .tabContent div');

        Tab(lis,divs);
    }

    // 右边侧边栏的点击效果

    rightAsideBind();
    function   rightAsideBind(){
        /**
         * 思路：
         * 1.先找到按钮元素，发生点击事件
         * 2.记录初始状态，判断点击事件，取反状态
         * 3.如果展开就
         */
        var btns=document.querySelector('#wrapper .rightAside .btns');
        var rightAside=document.querySelector('#wrapper .rightAside');
        // 记录初始状态
        var flag=true;//ture为关闭
        // 发生点击事件
        btns.onclick=function(){
          
            if(flag)
            {
                btns.className='btns btnsOpen';
                rightAside.className='rightAside asideOpen';
            }
            else
            {
                btns.className='btns btnsClose';
                rightAside.className='rightAside asideClose';
            }
            flag=!flag;
        }
    }

}